Since 2015, JavaScript has improved immensely.
It’s much more pleasant to use it now than ever.
In this article, we’ll look at how to use maps.
Map Size
We can get the size of a map by using the size property.
For instance, we can write:
const map = new Map();
map.set('foo', 1);
map.set('bar', 2);
console.log(map.size);
map.size would return 2.
Clearing Maps
We can clear maps with the clear method.
For example, we can write:
map.clear();
to remove all the entries from a map.
Setting up a Map
There are 2 ways to set up a map.
One way is to pass in an array with key-value pairs in an array.
For example, we can write:
const map = new Map([
['foo', 'one'],
['bar', 'two'],
['baz', 'three'],
]);
Another way to create a map is to call the set method.
For instance, we can write:
const map = new Map()
.set('foo', 'one')
.set('bar', 'two')
.set('baz', 'three');
set takes a key and its value as its argument.
They both put 3 entries with the given key-value pairs.
Map Keys
Map keys can be anything, even an object.
For example, we can write:
const map = new Map()
const KEY1 = {};
map.set(KEY1, 'foo');
const KEY2 = {};
map.set(KEY2, 'bar');
We created 2 objects and use them as keys.
Then we can call get with those objects to get the value.
Then we can write:
console.log(map.get(KEY1));
to get the value with key KEY1 .
We should see 'foo' logged.
The key lookup is done with the SameValueZero algorithm, so it’s mostly the same as === but NaN is considered to be equal to itself.
This means that objects are considered equal only if they reference the same thing in memory.
For example, if we have:
const map = new Map()
map.set(NaN, 'foo');
console.log(map.get(NaN));
Then the console log will log 'foo' since we added an entry with NaN as the key and NaN is considered to be equal to itself.
-0 and +0 are considered to be the same value.
So if we have:
const map = new Map()
map.set(-0, 'foo');
console.log(map.get(+0));
Then we get 'foo' logged.
Trying to get an entry with a key that isn’t in the map returns undefined .
For example, if we write:
new Map().get('foo')
Then we get undefined .
Iterating Over Maps
We can iterate over maps by using the for-of loop.
To loop through the keys, we can get them with the map.keys() method.
For example, we can write:
const map = new Map()
.set('foo', 'one')
.set('bar', 'two')
.set('baz', 'three');
for (const key of map.keys()) {
console.log(key);
}
Then we get 'foo' , 'bar' , and 'baz' logged.
The values method returns a iterator with the values of the map.
For example, we can write:
const map = new Map()
.set('foo', 'one')
.set('bar', 'two')
.set('baz', 'three');
for (const value of map.values()) {
console.log(value);
}
Then we get 'one' , 'two' , 'three' logged.
The entries method returns an iterator with the key-value pairs in an array.
For example, we can write:
const map = new Map()
.set('foo', 'one')
.set('bar', 'two')
.set('baz', 'three');
for (const [key, value] of map.entries()) {
console.log(key, value);
}
We destructured the key and value and logged them, so we get:
foo one
bar two
baz three
logged.
Conclusion
We can use maps in various. We can add, update, get, and remove entries from them.
Also, we can loop through them in various ways.
